import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.querySelector('#root'));

const ulNode = (
  // 💥1、 JSX必须有一个根节点，类似vue2中template
  // 👍使用<></>包住兄弟节点  等价于 <React.Fragment></React.Fragment>
  <>
    <ul>
      <li>苹果</li>
      <li>橘子</li>
      <li>香蕉</li>
    </ul>
    <ul>
      <li>苹果</li>
      <li>橘子</li>
      <li>香蕉</li>
    </ul>
    {/* 💥2、 每个元素必有闭合标记 */}
    <input type="text" id="box" />
    {/* 
      3、💥两个关键字冲突：
        3.1. class => className
        3.2. for => htmlFor
    */}
    <label className="xxx" htmlFor="box">
      点我等同于点了input
    </label>
  </>
);

root.render(ulNode);
